import React from "react";
import { useShallow } from "zustand/react/shallow";
import EchartsInstance from "@/components/EchartsInstance";
import { useGlobalStore } from "@/stores";
import { trafficOptions } from "./options";

interface Props {
  data: Record<string, any>;
}
const TrafficSituation: React.FC<Props> = (props) => {
  const { renderer } = useGlobalStore(useShallow((state) => ({ renderer: state.renderer })));

  const config = trafficOptions(props.data.traffic);

  return (
    <div className="mt-[15px]">
      <div className="flex justify-between items-center mx-[15px]">
        <div className="flex items-center text-[16px]">
          <span className="text-[#c0c9d2]">平均接纳次数(小时)：</span>
          <span className="text-[#47dae8]">{props.data.accessFrequency}次</span>
        </div>
        <div className="flex items-center text-[16px]">
          <span className="text-[#c0c9d2]">流量峰值：</span>
          <span className="text-[#47dae8]">{props.data.peakFlow}M</span>
        </div>
      </div>
      <EchartsInstance className="w-[430px] h-[250px]" renderer={renderer} options={config} />
    </div>
  );
};

export default React.memo(TrafficSituation);
